require(['./config'], () => {
  require(['template', 'swiper', 'footer', 'cookie'], (template, swiper) => {
    class Index {
      constructor() {
        this.flowerListJson();
        this.carousel();
        this.flowerListRap2();
        this.login();
        this.outLogin();
        this.toTop();
        this.headerSelect();
      }
      flowerListJson() {
        // 请求本地json文件渲染
        $.get('/libs/json/homeCategory.json', resp => {
          // template方法第一个参数传script的id名（不加#）
          // 第二个参数是对象，对象里写模板所需要的数据
          //   对象的属性名是模板里需要的变量名，属性值是从后端拿到的值
          $('#flowerList-1').html(template('flowerListTemplate-1', { list: resp }))
        })
      }
      flowerListRap2() {
        // 利用rap2请求数据渲染
        $.get('http://rap2.taobao.org:38080/app/mock/265776/api/flowerList-2', resp => {
          if (resp.code === 200) {
            const { list } = resp.body;
            $('#flowerListRap2').html(template('giftList2Template', { list }));
          }
        })
      }
      carousel() {
        var mySwiper = new swiper('.swiper-container', {
          // direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
          autoplay: true,
          effect: 'fade',
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },


          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',

          },

          // 如果需要滚动条
          // scrollbar: {
          //   el: '.swiper-scrollbar',
          // },
        })

        /*鼠标移入停止轮播*/
        $('#swiper-1').on('mouseenter', () => {
          mySwiper.autoplay.stop();
        });
        // 鼠标离开 继续轮播
        $('#swiper-1').on('mouseleave', () => {
          mySwiper.autoplay.start();
        });
      }
      login() {
        let name = $.cookie('name');
        if(name){
          $('.welcome').show();
          $('.welcome span').html(name);
          $('.outBtn').show();
          $('.loginBtn').hide();
        }
      }
      outLogin() {
        $('.outBtn').on('click', () => {
          if (confirm('确定退出吗?')) {
            $.removeCookie('name', { path: '/' });
            location.href='/index.html';
            $('.welcome').hide();
            $('.outBtn').hide();
            $('.loginBtn').show();
            localStorage.removeItem('cart');

          }
        })
      }
      toTop() {
        $(window).on('scroll',()=>{
          const scroll=$(document).scrollTop();
          if(scroll>300){
            $('#to-top').show();
          }else{
            $('#to-top').hide();
          }
          // console.log(scroll)
        })
        $('#to-top').on('click', () => {
          $('body,html').animate({ scrollTop: 0 }, 500)
        })
      }
      headerSelect(){
        $('#headerBtn').on('click',()=>{
          const id=$('#header-select').val();
          location.replace(`./html/kind.html?id=${id}`);
          
        })
      }
    }
    new Index()
  })
})
